<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h2 {
        border-bottom: 4px solid rgb(119, 50, 50);
        text-align: center;
    }

    .text {

        border-top: 1px dotted pink;
        border-bottom: 5px double black;
        border-left: 1px solid #f00;
        border-right: 6px solid #f22;
    }

    img {
        margin-top: 100px;
        border: 5px solid black;
    }

    .box {
        background-color: pink;
        padding: 80px;
        padding-bottom: 0;
        border: 1 solid black;
    }

    /* p.normal {
        border: 2px solid red;
    } */

    p.round1 {
        border: 2px solid red;
        border-radius: 5px;
    }

    p.round2 {
        border: 2px solid red;
        border-radius: 8px;
    }

    p.round3 {
        border: 2px solid red;
        border-radius: 12px;
    }

    #grad1 {
        height: 200px;
        background-color: red;
        /* 针对不支持渐变的浏览器 */
        background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    }

    #grad2 {
        height: 200px;
        background-color: red;
        /* 针对不支持渐变的浏览器 */
        background-image: repeating-linear-gradient(45deg, red, yellow 7%, green 10%);
    }

    #grad3 {
        height: 200px;
        background-color: red;
        /* 针对不支持渐变的浏览器 */
        background-image: repeating-linear-gradient(190deg, red, yellow 7%, green 10%);
    }

    #grad4 {
        height: 200px;
        background-color: red;
        /* 针对不支持渐变的浏览器 */
        background-image: repeating-linear-gradient(90deg, red, yellow 7%, green 10%);
    }
</style>

<body>
    <h2>设置边框样式</h2>
    <div class="text">海内存知己天涯若比邻</div>
    <img src="img/tu.png" alt="反反复复" title="ffff ">
    <div class="box"><img src="img/tu.png" alt=""></div>


    <p class="normal">普通边框</p>
    <p class="round1">圆角边框</p>
    <p class="round2">角更圆的边框</p>
    <p class="round3">角最圆的边框</p>


    <h1>重复线性渐变</h1>

    <div id="grad1"></div>

    <p>在 45deg 轴上重复的渐变，从红色开始到绿色结束：</p>
    <div id="grad2"></div>

    <p>在 190deg 轴上重复的渐变，从红色开始到绿色结束：</p>
    <div id="grad3"></div>

    <p>在 90deg 轴上重复的渐变，从红色开始到绿色结束：</p>
    <div id="grad4"></div>
    子元素



</body>

</html>